<!--
 * @Author: 朱安武 549410045@qq.com
 * @Date: 2023-01-13 11:59:05
 * @LastEditors: 朱安武 549410045@qq.com
 * @LastEditTime: 2023-01-13 12:05:21
 * @FilePath: \mobile\src\components\Seckill.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <van-count-down :time="time">
            <template #default="timeData">
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds }}</span>
            </template>
        </van-count-down>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

//时间
const time = ref(1)
</script>

<style lang="scss" scoped>
.colon {
    display: inline-block;
    margin: 0 4px;
    color: #1989fa;
}

.block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #1989fa;
}
</style>